import React, { useState } from 'react'
import { Button, NavBar, Toast, Input, Card, Form } from 'antd-mobile'
import { DownOutline } from 'antd-mobile-icons'
import './App.css'

function App() {
  const [value, setValue] = useState('')
  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })
  return (
    <div>
      <NavBar onBack={back} style={{ marginBottom: 30 }}>
        京东登录注册
      </NavBar>
      <div style={{ paddingLeft: 20, paddingRight: 20 }}>
        <div className="inp-wrapper">
          <div className="inp-phone">
            <span style={{ marginRight: 10 }}>+86</span>
            <DownOutline />
          </div>
          <Input
            placeholder="请输入内容"
            value={value}
            onChange={(val) => {
              setValue(val)
            }}
          />
        </div>

        <div className="verify-wrapper" style={{ marginTop: 20 }}>
          <Input placeholder="请输入验证码"></Input>
          <div className="line"></div>
          <span className="verify">获取验证码</span>
        </div>

        <Button
          block
          size="large"
          style={{ marginTop: 20 }}
          className="inp-btn"
          shape="rounded"
        >
          登录
        </Button>
        <div className="link">
          <span>账号密码登录</span>
          <span>手机快速注册</span>
        </div>
        <div className="other-login">
          <span className="hr"></span>
          <span>其他登录方式</span>
          <span className="hr"></span>
        </div>
        <div className="login-icon">
          <i className="iconfont icon-QQ"></i>
          <i className="iconfont icon-wechat-fill"></i>
          <i className="iconfont icon-iphone"></i>
        </div>
        <div style={{ textAlign: 'center', marginTop: 20 }}>
          <input type="checkbox" />
          &nbsp; 若您输入的手机号未注册，将为您直接注册，注册即视为同意
          <a href="">京东用户注册协议</a>
          <a href="">用户隐私政策</a>
        </div>
      </div>
    </div>
  )
}

export default App
